<template>
  <div class="top">
    <div class="top-search">
      <div class="logo">
        <h2>明日头条</h2>
      </div>
      <div class="search-box">
        <input type="text">
        <div class="search-btn">搜索</div>
      </div>
      <div class="search-rank">
        <span>热搜：</span>
        <span>广东现病毒突变株</span>
        <span>韩国出现抢盐潮</span>
        <span>驻也门使领馆关闭</span>
      </div>
    </div>
    <div class="top-banner">
      <video src="../../../assets/earth_v4.mp4" muted="" autoplay loop="" playsinline="" preload="auto"></video>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Home',
  components: {}
})
</script>
<style scoped lang="scss">
  .top {
    width: 100%;
    height: 420px;
    position: relative;

    .top-search {
      position: absolute;
      z-index: 10;
      top: 50%;
      left: 50%;
      margin-left: -350px;
      transform: translateY(-50%);
      width: 700px;
      text-align: center;
      .logo {
        font-size: 30px;
        color: #fff;
        margin-bottom: 15px;
      }
      .search-box{
        width: 100%;
        display: flex;
        .search-btn{
          width: 100px;
        }
        input{
          flex: 1;
          height: 50px;
          border-radius: 10px;
          line-height: 20px;
          color: #222;
          padding:0 18px;
          background-color: #fff;
          outline: none;
          border:0;
        }
        .search-btn{
          background-color: #f04142;
          border-top-right-radius: 8px;
          border-bottom-right-radius: 8px;
          margin-left: -10px;
          line-height: 45px;
          color: #fff;
        }
      }
      .search-rank{
        color: #fff;
        text-align: left;
        margin-top: 10px;
        span{
          margin-right: 15px;
          &:last-child{
            margin-right: 0;
          }
        }
      }
    }

    .top-banner {
      width: 100%;
      height: 100%;
      overflow: hidden;
      video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
</style>
